<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useTokenStore } from '@/stores/token';
import { ElMessage } from 'element-plus';
import { logoutService } from '@/api/login';
import { selectArticleListService } from "@/api/article"
import { updatePasswordService } from '@/api/user'
import { ref } from 'vue'
import {
    Lock,
    Tools,
    Avatar,
    ArrowRight,
    Expand,
} from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'

const isHome = ref(true);

const activeName = ref('文章')

const handleClick = (tab: TabsPaneContext) => {
    if (tab.props.name === '文章') {
        isHome.value = true;
        router.push('/user/home')
    } else {
        isHome.value = false;
        router.push('/user/talk')
    }
}
//点击标题时使文字变色且鼠标从箭头改为手指
const InitialColor = ref(null);
const InitialStyle = ref(null);
const changeColor = (index: any) => {
    InitialColor.value = index;
    InitialStyle.value = index;
}
const resetColor = () => {
    InitialColor.value = null;
    InitialStyle.value = null;
}
const router = useRouter();
const tokenStore = useTokenStore();
const logout = async () => {
    await logoutService();
    tokenStore.removeToken();
    router.push('/login')
    ElMessage.success("退出成功")
}
//获取文章列表集合
const articleList = ref([{
    "id": 1,
    "title": "测试",
    "content": "测试",
    "description": "测试",
    "author": "zhangSan",
    "createTime": "",
    "category": "测试"
}]);
const selectArticleList = async () => {
    let result = await selectArticleListService();
    articleList.value = result.data;
}
selectArticleList();

//修改用户密码表单模型
const passwordForm = ref({
    id: 1,
    oldPassword: '',
    newPassword: ''
})
const clearPasswordForm = () => {
    passwordForm.value = {
        id: 1,
        oldPassword: '',
        newPassword: ''
    }
}
//修改用户密码的表单校验模型
const Rules = ref({
    oldPassword: [
        { required: true, message: '请输入原密码', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请输入修改后的密码', trigger: 'blur' }
    ]
})
const dialogVisible = ref(false)
//用户修改密码
const updatePassword = async () => {
    let result = await updatePasswordService(passwordForm.value) as any
    ElMessage.success(result.msg ? result.msg : '密码修改成功')
    dialogVisible.value = false
}

//点击文章标题跳转到详情页面
const goArticleDetails = (item: any) => {
    router.push({
        path: "/user/article",
        query: {
            id: item.id
        }
    })
}
</script>

<template>
    <center>
        <div>
            <el-container>
                <el-header>
                    <el-row>
                        <el-col :span="8">
                            <div class="text">
                                <img src="../../assets/logo.jpg" class="logo" />
                                <h2>博客空间</h2>
                            </div>
                        </el-col>
                        <el-col :span="8" class="option">
                            <el-tabs v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane name="文章">
                                    <template #label>
                                        <h2 style="font-size: 20px;">文章</h2>
                                    </template>
                                </el-tab-pane>
                                <el-tab-pane name="说说">
                                    <template #label>
                                        <h2 style="font-size: 20px;">说说</h2>
                                    </template>
                                </el-tab-pane>
                            </el-tabs>
                        </el-col>
                        <el-col :span="8">
                            <span class="icon">
                                <el-icon :size="30" style="margin-right: 8px; margin-top: 1px">
                                    <Avatar />
                                </el-icon>
                                <el-dropdown>
                                    <el-icon :size="20">
                                        <Tools />
                                    </el-icon>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="dialogVisible = true">
                                                修改密码
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="logout">
                                                退出登录
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </span>
                        </el-col>
                    </el-row>
                </el-header>
                <el-main>
                    <div class="bread">
                        <el-icon size="23px">
                            <Expand />
                        </el-icon>
                        <el-breadcrumb :separator-icon="ArrowRight">
                            <el-breadcrumb-item v-for="(item, index) in $route.matched" :key="index"
                                :to="{ path: item.path }" @click="isHome = true; activeName = '文章'">
                                <p style="font-size: 23px;">{{ item.meta.title }}</p>
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div>
                        <div v-if="isHome" class="space">
                            <el-space direction="vertical">
                                <el-card shadow="never" style="border: none;">
                                    <template #header>
                                        <div style="font-size: 25px;">
                                            <h1>—文章—</h1>
                                        </div>
                                    </template>
                                    <div class="list" v-for="(item, index) in articleList" :key="item.id"
                                        @click="isHome = false; goArticleDetails(item)" @mouseover="changeColor(index)"
                                        @mouseout="resetColor" :style="{
                                            color: InitialColor === index ? 'red' : 'black',
                                            cursor: InitialStyle === index ? 'pointer' : 'default'
                                        }">
                                        <span style="font-size: 23px ;font-weight: bold;">
                                            {{ item.title }}
                                        </span>
                                        <br /><br />
                                        <div style="font-size: 18px ;">
                                            {{ item.description }}
                                        </div>
                                        <div style="text-align: right;">
                                            {{ item.author }}
                                            &nbsp;
                                            {{ item.createTime }}
                                        </div>
                                        <el-divider />
                                    </div>
                                </el-card>
                            </el-space>
                        </div>
                        <div v-else>
                            <router-view></router-view>
                        </div>
                    </div>
                </el-main>
            </el-container>
            <el-dialog v-model="dialogVisible" title="修改密码" width="500">
                <div>
                    <el-form size="large" autocomplete="off" :model="passwordForm" :rules="Rules">
                        <el-form-item prop="password">
                            <el-input :prefix-icon="Lock" type="password" placeholder="请输入原密码"
                                v-model="passwordForm.oldPassword"></el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input :prefix-icon="Lock" type="password" placeholder="请输入修改后的密码"
                                v-model="passwordForm.newPassword"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false;clearPasswordForm()">取消</el-button>
                        <el-button type="primary" @click="updatePassword()">
                            确认修改
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
    </center>
</template>



<style lang="scss" scoped>
.el-container {

    width: 60%;

    .el-header {
        height: 110px;

        .text {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            .logo {
                width: 160px;
                height: 110px;

            }

            h2 {
                font-size: 30px;
                font-style: italic;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
                height: 60px;
            }
        }

        .option {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;

            .el-tabs {
                margin-left: 20px;
            }
        }

        .icon {
            margin-left: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
    }

    .el-main {
        .bread {
            display: flex;
            align-items: center;

            .el-icon {
                margin-right: 20px;
                margin-left: 100px;
            }
        }

        .space {
            display: flex;
            margin-left: 80px;
            margin-top: 20px;

            .el-card {

                width: 1000px;

                .list {
                    text-align: left;
                }
            }


        }


    }
}
</style>